<template>
  <div class="light-control">
    <div class="control-panel">
      <h2>MM补光灯</h2>
      
      <!-- 开关按钮 -->
      <van-button 
        type="primary"
        block
        @click="toggleLight"
        class="power-button"
      >
        {{ isOn ? '关闭' : '开启' }}
      </van-button>

      <!-- 亮度控制 -->
      <div class="slider-section">
        <div class="slider-label">
          <span>亮度: {{ brightness }}%</span>
        </div>
        <van-slider 
          v-model="brightness"
          @change="updateBrightness"
        />
      </div>

      <!-- 色温控制 -->
      <div class="slider-section">
        <div class="slider-label">
          <span>色温: {{ temperature }}K</span>
        </div>
        <van-slider 
          v-model="temperature"
          :min="2700"
          :max="6500"
          :step="100"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button as VanButton, Slider as VanSlider } from 'vant'

const isOn = ref(false)
const brightness = ref(50)
const temperature = ref(5000)

const toggleLight = () => {
  isOn.value = !isOn.value
  updateScreenBrightness()
}

const updateBrightness = (value: number) => {
  brightness.value = value
  if (isOn.value) {
    updateScreenBrightness()
  }
}

const updateScreenBrightness = () => {
  const brightnessValue = isOn.value ? brightness.value / 100 : 0
  document.body.style.backgroundColor = `rgba(255, 255, 255, ${brightnessValue})`
}
</script>

<style>
.light-control {
  min-height: 100vh;
  background-color: #1f1f1f;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.control-panel {
  max-width: 400px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.slider-section {
  margin: 20px 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.slider-label {
  margin-bottom: 10px;
  color: #fff;
}

.power-button {
  margin-bottom: 20px;
}

/* 确保滑块在深色背景下可见 */
:root {
  --van-slider-bar-height: 4px;
  --van-slider-button-width: 24px;
  --van-slider-button-height: 24px;
  --van-slider-active-background-color: #4fc08d;
}
</style> 